/*
函数式组件

1. 函数式组件的本质：无状态、无实例
Vue3 中的函数式组件是纯函数，它：
没有组件实例（this）
没有响应式状态（自身不维护 ref、reactive 等数据）
没有生命周期钩子（因为生命周期依赖组件实例）
仅接收 props 和 context（包含插槽、属性等），并返回虚拟 DOM（vnode）
这种设计使其避免了组件实例的创建、状态追踪、生命周期管理等开销，因此在渲染简单、无状态的内容时，性能确实会比有状态组件更优。


2. 性能优势的核心原因
减少内存占用：无需维护组件实例对象（包含大量内部属性，如 $data、$props、生命周期队列等），内存开销更小。
简化更新逻辑：由于没有自身状态，函数式组件的更新完全依赖 props 或上下文的变化，Vue 的响应式系统无需追踪其内部状态，更新检查更高效。
跳过实例相关逻辑：在编译和运行时，Vue 会对函数式组件跳过实例初始化、生命周期调用等步骤，执行路径更短。

 
3. 注意：并非所有场景都更优
若组件需要维护状态（如 ref、reactive）、使用生命周期钩子（如 onMounted），则无法使用函数式组件，强行使用会导致逻辑复杂且性能无优势。
Vue3 对有状态组件的性能优化（如编译时优化、PatchFlag 等）已经非常成熟，对于复杂组件，函数式组件的性能优势可能不明显。


总结
函数式组件的性能优势主要来自 “无实例、无状态、无生命周期” 的精简设计，减少了不必要的运行时开销。但它仅适用于纯展示、依赖外部数据（props / 插槽）、无内部状态和生命周期逻辑的场景。
在这类场景下，它确实比有状态组件更高效；但对于需要状态管理或生命周期的组件，强行使用函数式组件反而会降低开发效率，且无性能收益。
*/
import { h, defineComponent } from 'vue'
import { userInfoStore } from '@/pinia/userInfo'
import hasPermission from '@/utils/hasPermission'

export default defineComponent({
  name: 'AuthWrapper',
  props: {
    needAuth: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { slots }) {
    const userInfo = userInfoStore()
    const hasAuth = hasPermission(userInfo.userAuth, props.needAuth)

    return () => h('div', { class: 'wrapper' }, hasAuth ? slots.default?.() : undefined)
  }
})
